<template>
  <div>
    <el-dialog
      title="查看评价"
      :visible.sync="showTrue.value"
      width="800px"
      height='446px'
      @close="closeDialog"
      center
      custom-class='dialogNoPadding dialogFontGray'
    >
      <div class="evaluata_Order_Box">
        <ul>
          <li> <span class="evaluata_Order_color">商品评分:</span>
            <el-rate
              v-model="evalData.value"
              disabled
              :colors="['#EB4426','#EB4426','#EB4426']"
              class=" evaluata_rate"
            ></el-rate> <span>[{{evalData.date}}]</span>
          </li>
          <li> <span class="evaluata_Order_color">评价内容:</span><span>{{evalData.content}}</span></li>
          <li class="evaluata_Order_img_Box"> <span class="evaluata_Order_color">晒单图片:</span><img
              class="evaluata_Order_img"
              :src="evalData.url"
              alt=""
            ></li>
        </ul>
        <el-form>
          <el-form-item label="商家回复:" v-show="flag">
            <el-input
              class="evaluateOrder_input"
              type="textarea"
              :rows="3"
              placeholder="请输入内容"
              width='200px'
              maxlength="300"
              v-model="evalBack"
            >
            </el-input>
          </el-form-item>
          <el-button
            @click="handelEvalBack"
            class="evaluata_button"
          > 回复</el-button>
        </el-form>
      <p v-show="!flag">{{evalBack}}</p>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: ["showTrue"],
  data() {
    return {
      
      flag:true,
      evalData: {
        value: 4,
        content: "美支支，奥利给",
        url: "",
        date: "2020-05-06 12:34:56"
      },
      evalBack: null
    };
  },
  filters: {},
  watch: {
    showTrue(val) {
      this.dialogShow = val;
    },
    orderData(val) {
      console.log(val);
    }
  },
  created() {},
  mounted() {},
  methods: {
    closeDialog() {
      this.$emit("close");
    },
    submitDialog() {
      this.$emit("submit");
    },
    // 提交信息
    handelEvalBack() {
      if(evalBack!=null){
        this.flag=false
        this.$message.warning("评价内容不能为空哟")
      }else{
        
      }
    }
  }
};
</script>

<style scoped rel="stylesheet">
.evaluata_Order_Box {
  padding: 10px 20px 39px 20px;
  line-height: 40px;
  color: rgba(0, 0, 0, 1);
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
}
.evaluata_Order_color {
  color: rgba(152, 159, 173, 1);
  padding-right: 10px;
}
.evaluata_Order_Box ul {
  border-bottom: 0.5px solid rgba(235, 238, 243, 1);
  margin-bottom: 20px;
}
.evaluata_rate {
  display: inline-block;
  position: relative;
  top: -1px;
  left: -5px;
}
.evaluata_Order_img {
  display: block;
  width: 64px;
  height: 64px;
  background: rgba(216, 216, 216, 1);
  position: relative;
  margin-top: 10px;
}
.evaluata_Order_img_Box {
  height: 64px;
  display: flex;
  margin-bottom: 30px;
}

.el-textarea {
  width: 90%;
}
.evaluata_button {
  display: block;
  margin: 0 auto;
  width: 108px;
  height: 32px;
  background: rgba(235, 68, 38, 1);
  border-radius: 2px;
  color: #fff;
}
</style>
